<template>
	<view class="fault">
		<view class="checK_box">
			<view class="coll_li" v-for="(item,index) in faultList" :key="index">
				<view @click="chackItem(item)">
					{{index+1}}、{{item.name}}
					<uni-icons type="right"></uni-icons>
				</view>
				<checkbox :value="`${item.id}`" :checked="isShowItem(item)" color="#007cff" @click="onchackItem(item)">
				</checkbox>
			</view>
		</view>
		<view class="btn_word">
			<button type="primary" class="btn_bor" @click="onConfirm">确认</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		computed
	} from 'vue'
	import {
		onLoad, onUnload
	} from '@dcloudio/uni-app'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import store from '@/store/index.js'
	import apiFault from '@/util/api/fault.js'
	const totle = ref(0) //总条数
	const page = ref(1)
	const faultList = ref([]) //列表
	const penId = ref()
	const chackItemId = ref()//选中的类型
	const arryList = ref([])//存储临时选中的类型
	const valueIdCode = ref()
	onLoad((e) => {
		valueIdCode.value = e.value
		getfaultTypeList(e.id)
		penId.value = e.id
		arryList.value = JSON.parse(JSON.stringify(store.state.checkedFaultList))
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 获取类型列表
	const getfaultTypeList = async (id) => {
		let data = {
			"limit": 50,
			"page": page.value
		}
		await apiFault.getMobileFaultList(data, id).then(res => {
			if (res.code == 20000) {
				totle.value = res.data.total
				faultList.value = [...faultList.value, ...res.data.rows]
			}
		})
	}
	// 查看详情
	const chackItem = (item) => {
		chackItemId.value = item.id
		uni.navigateTo({
			url: '/pages/home/fault/detail?id=' + item.id
		})
	}
	// 点击选中或取消
	const onchackItem = (item) => {
		if (arryList.value.length == 0) {
			arryList.value.push({ typeId: store.state.chackFaultItem.id, list: [item.name] })
		} else {
			const result = arryList.value.some(o => {
				return store.state.chackFaultItem.id == o.typeId
			})
			// 判断类型
			if (result) {
				const result2 = arryList.value.some(o => {
					if (store.state.chackFaultItem.id == o.typeId) {
						return o.list.includes(item.name)
					}
				})
				// 判断类型的子集
				if (result2) {
					arryList.value = arryList.value.filter(o => {
						if (store.state.chackFaultItem.id == o.typeId) {
							o.list = o.list.filter(i => {
								return i != item.name
							})
							if (o.list.length == 0) {
								return !o
							}
						}
						return o
					})
				} else {
					arryList.value = arryList.value.map(o => {
						if (store.state.chackFaultItem.id == o.typeId) {
							o.list.push(item.name)
						}
						return o
					})
				}

			} else {
				arryList.value.push({ typeId: store.state.chackFaultItem.id, list: [item.name] })
			}
		}
	}
	// 设置处理选中的类型
	const isShowItem = (item) => {
		for (let i of arryList.value) {
			if (i.typeId == store.state.chackFaultItem.id) {
				return i.list.includes(item.name)
			}
		}
	}
	// 提交
	const onConfirm = () => {
		store.commit('setchackFaultList', arryList.value)
		uni.navigateBack({
		    delta: 2
		});
	}
	//加载更多
	onReachBottom(() => {
		if (totle.value > faultList.value.length) {
			page.value += 1
			getfaultTypeList(penId.value)
		}
	})
</script>

<style lang="scss" scoped>
	.fault {
		background-color: #f6f7fa;
		height: 100vh;
		position: relative;
		.checK_box {
			width: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-content: center;
			padding: 40rpx 40rpx;
			box-sizing: border-box;

			.coll_li {
				padding: 30rpx 24rpx;
				border-radius: 4rpx;
				background-color: #fff;
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.btn_word {
			padding: 50rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 2;

			:deep(button:after) {
				border: none !important;
			}

			.btn_bor {
				font-size: 32rpx;
				border-radius: 50rpx;
				background-color: #007cff;
			}
		}

	}
</style>